<?php defined('InNcPHP') or exit('Access Invalid!');?>

<style>
    .footer.footer-home {display: none;}

    .zimu{position: fixed;top:35%;left:30%;right:30%;}
    .zimu div{height:60px;width:60px;border-radius: 5px;background: rgba(0,0,0,0.4);color:#25B150;line-height: 60px;text-align: center;font-size: 30px;margin:auto;}

    .page-position{position:relative;}
    .page-position-box{position:relative;right:20px;margin-left:20px;font-size:0.9em;}
    .page-position-box dl{padding:10px;}
    .page-position-box dt{height:20px;line-height:20px;color:#999;}
    .page-position-box dd{box-sizing:border-box;font-size:0.96em;}
    .page-position-box dd a{background:#fff;border-radius:3px;width:30%;height:30px;line-height:30px;margin-right:2%;display:inline-block;text-align:center;margin-top:10px;}

    .page-position-list{position:relative;margin-top:5px;background:#fff;}
    .page-position-list dl{border-top:1px solid #ddd;font-size:0.9em;padding:0 10px;}
    .page-position-list dt{height:25px;line-height:25px;background:#f0f0f0;margin-left:-10px;margin-right:-10px;text-indent:10px;color:#888;}
    .page-position-list dd{height:35px;line-height:35px;border-bottom:1px solid #eee;font-size:0.96em;}
    .page-position-list dd:last-child{border-bottom:0px;}
    .page-position-list a{display:block;}
    .page-position-char{width:20px;position:fixed;top:95px;bottom:0;right:0;background:#fff;text-align:center;padding-top:5px;}
    .page-position-char a{display:block;font-family:Arial;font-size:0.9em;}
    .page-position .selectCity{text-indent:10px;height:35px;line-height:35px;border:1px solid #ddd;background:#fff;border-width:1px 0 1px 0;font-size:0.9em;}

    .page-search-in{padding:10px;}
    .page-search-in .input-box{margin-right:55px;border:1px solid #ddd;background:#fff;height:30px;border-radius:4px;line-height:30px;position:relative;}
    .page-search-in .input-box i{width:28px;height:28px;text-align:center;position:absolute;left:0;top:0;color:#bbb;}
    .page-search-in .input-box input{height:20px;outline:none;line-height:20px;margin:0px;padding:0;border:0px;margin-left:33px;font-size:14px;width:84%;}
    .page-search-in .input-box input:focus{ height:18px}
    .page-search-in .input-cal{width:40px;height:30px;line-height:30px;text-align:center;position:absolute;top:11px;right:5px;color:#129aee;}
    .page-search-in .input-bak{width:30px;height:30px;line-height:30px;text-align:center;position:absolute;top:11px;left:5px;color:#888;}
    .page-search-in .input-btn{width:50px;height:30px;line-height:30px;text-align:center;position:absolute;top:10px;right:8px;color:#129aee;border:1px solid #ddd;background:#fff;border-radius:4px;}

    .page-position-search{display:none;position:fixed;background:#fff;width:100%;left:0;top:52px;bottom:0px;}
    .page-position-search:before{content:'';position:absolute;height:1px;top:0;width:100%;border-top:1px solid #ddd;}
    .page-position-search dl{position:relative;font-size:0.9em;padding-left:10px;overflow-y:scroll;height:100%;}
    .page-position-search dd{height:35px;line-height:35px;border-bottom:1px solid #eee;font-size:0.96em;}
    .page-position-search dd:last-child{border-bottom:0px;}
    .page-position-search a{display:block;}

</style>
<div class="header">
    <a href="javascript:history.go(-1); " class="return iconfont icon-shangyiye"></a>
    <div class="header-title">城市切换</div>
</div>
<div class="page-location">
    <div class="page-search-in" style="position: relative;">

        <div class="input-box">
            <form>
                <i class="iconfont icon-search"></i>
                <input type="text" name="keyword" id="loactionKey" placeholder="请输入城市名">
            </form>
        </div>
        <div class="input-btn btn-search">搜索</div>
    </div>

    <div class="page-position">
        <div class="selectCity">当前城市：<?php echo $_SESSION['pos']['city_name'];?></div>
        <div class="page-position-box">
            <dl>
                <dt>热门城市</dt>
                <dd>
                    <?php if(!empty($output['hot_city']) && is_array($output['hot_city'])) {?>
                    <?php foreach ($output['hot_city'] as $k=>$v){ ?>
                        <a style="overflow: hidden;" href="javascript:void(0);" data-city-id="<?php echo $v['area_id'] ?>"><?php echo $v['name']?></a>
                        <?php  }?>
                    <?php } ?>
                    <!--<a style="overflow: hidden;" href="javascript:void(0);" data-city-id="60">厦门</a>
                    <a style="overflow: hidden;" href="javascript:void(0);" data-city-id="53">福州</a>
                    <a style="overflow: hidden;" href="javascript:void(0);" data-city-id="58">泉州</a>-->
                </dd>
            </dl>
        </div>
        <div class="page-position-list">
            <?php if ($output['city'] && is_array($output['city'])): ?>
            <?php foreach ($output['city'] as $key => $val): ?>
            <?php if (count($val)): ?>
                <dl>
                    <dt id="<?php echo $key; ?>"><?php echo $key; ?></dt>
                    <?php foreach ($val as $k => $v): ?>
                    <dd><a href="javascript:void(0);" data-city-id="<?php echo $v['area_id'];?>"><?php echo $v['name'];?></a></dd>
                    <?php endforeach; ?>
                </dl>
            <?php endif; ?>
            <?php endforeach; ?>
            <?php endif; ?>
        </div>
        <div class="page-position-char" style="width:32px;padding-top:0;">
            <?php foreach ($output['char'] as $val): ?>
                <a hzimu="<?php echo $val;?>"><?php echo $val;?></a>
            <?php endforeach; ?>
        </div>
    </div>
    <div class="page-position-search">
        <dl id="searchList"></dl>
    </div>
</div>

<script>
    $(function(){
        $(".page-position-box,.page-position-list").find("a").on("click", function(){
            var city_id = $(this).data("city-id");
            $.post('index.php?act=location&op=change', {city:city_id}, function (data) {
                if (data.res) {
                    location.href = 'index.php';
                }
            }, 'json');
        });

        $(".page-position-char a").click(function(){
            window.location.href = "#" + $(this).attr("hzimu");
            $(".zimu").remove();
            var py = $(this).text();
            var div = "<div class='zimu'><div>" + py + "</div></div>";
            $("body").append(div);
        });


        var scheight=$(".page-position-char").height();
        var lineH=parseInt(scheight/$(".page-position-char a").length);
        if(scheight>=432){
            $(".page-position-char a").css({"line-height":"18px"});
        }else{
            $(".page-position-char a").css({"line-height":lineH+"px"});
        }
        var aheight=$(".page-position-char a").height()*$(".page-position-char a").length;

        var is_scroll=false;
        $(".page-position-char").bind("touchstart",function(){
            is_scroll=true;
        });
        var ischange="";
        $(".page-position-char").bind("touchmove",function(){
            var offH=$(document).scrollTop();
            var touch = event.targetTouches[0];
            var divheight=touch.pageY-50-offH;
            divheight=parseInt(divheight);
            if(divheight<aheight&&divheight>0){
                var zimuindex=parseInt(divheight/$(".page-position-char a").height());
                if(ischange!=zimuindex){
                    ischange=zimuindex;
                    var zimuzhi=$(".page-position-char a:eq("+zimuindex+")").attr("hzimu");
                    hre=zimuzhi;
                    document.location.href="#"+zimuzhi;
                    $(".zimu").remove();
                    var div="<div class='zimu'><div>"+zimuzhi+"</div></div>";
                    $("body").append(div);
                }
            }
        });
        $(".page-position-char").bind("touchend",function(){
            is_scroll=false;
            setTimeout(function(){
                $(".zimu").fadeOut();
            },800);
        });


        document.addEventListener("touchmove",function(e){
            if(is_scroll==true){
                e.preventDefault();
                e.stopPropagation();
            }
        },false);


        //搜索
        $('.btn-search').on('click', function() {
            $('form').submit();
        });
        //搜索结果
        $('div').delegate('form', 'submit', function() {
            var keyword = $("#loactionKey").val();
            if(keyword != ''){
                $(".page-position").hide();
                $(".page-position-search").show();
                $.getJSON('index.php?act=location&op=search', {keyword:keyword},function(json){
                    var obj = $("#searchList");
                    if(json.result){
                        var html = "";
                        for (var i =  0; i < json.data.length; i++) {
                            html += "<dd><a href=\"javascript:void(0);\" data-city-id=\""+json.data[i].area_id+"\">"+json.data[i].name+"</a></dd>";
                        };
                        obj.html(html);
                    }else{
                        obj.html("<dd>抱歉，未找到相关位置，可尝试修改后重试</dd>");
                    }
                });
            }
            return false;
        });
        //点击搜索结果
        $(document).on("click", "#searchList > dd > a", function() {
            var city_id = $(this).data("city-id");
            $.post('index.php?act=location&op=change', {city:city_id}, function (data) {
                if (data.res) {
                    location.href = 'index.php';
                }
            }, 'json');
        });

    });
</script>